<template>
  <v-container>
    <v-sheet color="thirdary" class="rounded-lg pa-10">
      <div class="text-h4 text-center pt-5 pb-16">填写资料</div>
      <div class="d-flex justify-center py-5 cur-point p-relative">
        <label for="file" class="cur-point">
          <v-avatar
            color="primary"
            size="200"
            class="d-flex flex-column thirdary--text"
          >
            <v-img for="file" :src="base" v-if="!!base" @click="base = null">
              <template v-slot:placeholder>
                <v-row class="fill-height ma-0" align="center" justify="center">
                  <v-progress-circular
                    indeterminate
                    color="grey lighten-5"
                  ></v-progress-circular>
                </v-row>
              </template>
            </v-img>
            <div v-else>
              <i class="iconfont"
                ><span style="font-size: 5rem">&#xe66f;</span></i
              >
              <div class="text-h6 mt-2">上传您的头像</div>
              <v-file-input
                name="avatar"
                class="o-hidden p-absolute"
                id="file"
                accept="image/*"
                v-model="img"
              >
              </v-file-input>
            </div>
          </v-avatar>
        </label>
      </div>
      <div class="d-flex flex-wrap">
        <div class="col-12 col-md-6 pa-0 pr-md-5">
          <v-text-field label="昵称" v-model="nickname"></v-text-field>
        </div>
        <div class="col-12 col-md-6 pa-0 pl-md-5">
          <v-text-field label="年龄" v-model="age"></v-text-field>
        </div>
      </div>
      <v-text-field label="手机号码" v-model="phone"></v-text-field>
      <div class="d-flex flex-wrap">
        <div class="col-12 col-md-6 pa-0 pr-md-5">
          <v-select
            label="省份"
            v-model="division.selectProvinceName"
            :items="division.provinceNames"
          ></v-select>
        </div>
        <div class="col-12 col-md-6 pa-0 pl-md-5">
          <v-select
            label="城市"
            v-model="division.selectCitiesName"
            :items="division.cityNames"
          ></v-select>
        </div>
      </div>
      <v-text-field label="详细地址" v-model="address"></v-text-field>

      <div>
        <v-textarea label="个人简介" v-model="intro"></v-textarea>
      </div>
      <v-btn
        color="primary"
        width="100%"
        class="mt-10"
        @click="submit"
        :loading="loading"
        >{{ btnText }}</v-btn
      >
    </v-sheet>
  </v-container>
</template>



<script>
import getBase64 from "../untill/getBase64.js";
import { sendFormData } from "../components/network";
import { Division } from "../untill/getSite";
export default {
  data() {
    return {
      img: null,
      base: "",
      nickname: "",
      age: "",
      phone: "",
      address: "",
      intro: "",

      loading: false,
      btnText: "提交",

      division: new Division(),
    };
  },

  watch: {
    img() {
      this.img &&
        getBase64(this.img).then((data) => {
          this.base = data;
        });
    },
  },
  methods: {
    test() {
      console.log(this.division.selectCitiesName);
    },
    async submit() {
      const formData = new FormData();
      formData.append("avatar", this.img);
      formData.append("userId", this.$route.params.id);
      const filePath = await sendFormData("upload/uploadAvatar", formData);
      const form = {
        avatar: filePath,
        nickname: this.nickname,
        age: this.age,
        phone: this.phone,
        province: this.division.selectProvinceName,
        city: this.division.selectCitiesName,
        intro: this.intro,
        address: this.address,
      };

      const { data } = await this.$axios.post("users/updateUserInfo", form);
      this.loading = true;
      this.btnText = "提交中";
      if (data && data.code == 200) {
        this.loading = false;
        this.btnText = "提交完成，正在跳转";
        this.$router.push("/home");
        window.location.reload();
      }
    },
  },
  mounted() {
    const that = this;
    (async function () {
      const { data } = await that.$axios.get(
        `users/getUserInfo?userId=${that.$route.params.id}`
      );
      that.base = data.avatar;
      that.nickname = data.nickname;
      that.age = data.age;
      that.phone = data.phone;
      that.division.selectProvinceName = data.province;
      that.division.selectCitiesName = data.city;
      that.intro = data.intro;
      that.address = data.address;
      console.log(data);
    })();
  },
};
</script>



<style lang="scss" scoped>
</style>
